<template>
	<view class="manage-view">
		<view class="top">
			<uni-icons style="margin-left: 25rpx;" type="left" size="30" color="#9f9f9f" @click="toBackPage">
			</uni-icons>
			<view class="input">信息编辑</view>
		</view>

		<view class="content">
			
			<view class="content-title">
				编辑封面(点击更换)
			</view>
			
			<view class="cover-edit"  @click="changeAvatar">
				<image mode="aspectFill" :src="courseInfo.cover"></image>
			</view>
			
			
			
			<view class="content-title">
				编辑名称
			</view>
			
			<view class="name-edit">
				<view class="card">
					<view style="margin: 20rpx;">
						<input type="text" v-model="courseInfo.name" style="height: 50rpx"
							placeholder="请输入..." placeholder-style="font-style:italic"></textarea>
					</view>
				</view>
			</view>
			
			<view class="content-title">
				编辑简介
			</view>
			
			<view class="description-edit">
				<view class="card">
					<view style="margin: 20rpx;">
						<textarea  :show-confirm-bar="false" v-model="courseInfo.description" style="width: 100%;"
							placeholder="请输入..." placeholder-style="font-style:italic"></textarea>
					</view>
				</view>
			</view>
			
			<view class="content-title">
				编辑价格
			</view>
			
			<view class="name-edit">
				<view class="card">
					<view style="margin: 20rpx;">
						<input type="number" v-model="courseInfo.price" style="height: 50rpx"
							placeholder="请输入..." placeholder-style="font-style:italic"></textarea>
					</view>
				</view>
			</view>
			
			<view class="content-title">
				编辑介绍
			</view>
			
			<view class="introduction-edit">
				
			</view>
		</view>
		
		<view class="button" @click="updateCourseInfo">
			保存修改
		</view>
	
	</view>
</template>

<script>
	import UploadOss from '@/common/util/UploadOss';
	export default {
		data() {
			return {
				courseInfo:{},
			}
		},
		onLoad(options) {
			if(options.courseId){
				this.courseInfo.id = options.courseId
				this.getCourseManageInfo()
			}
		},
		methods: {
			getCourseManageInfo() {
				this.$api.getCourseManageInfo({
					courseId: this.courseInfo.id
				}).then(res => {
					console.log("课程信息", res)
					this.courseInfo = res.data;
				})
			},
			updateCourseInfo() {
				this.$api.updateCourseInfo(this.courseInfo).then(res => {
					uni.showToast({
						icon:'success',
						title:"修改成功",
						duration:500
					})
					setTimeout(function () {
						uni.navigateBack()
					}, 500);
				})
			},
			changeAvatar() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						UploadOss.uploadFile(res).then(res => {
							this.courseInfo.cover = res
						})
					}
				});
			},
			toBackPage() {
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	.manage-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 80rpx;

		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			padding: 20rpx 0;

			background-color: white;
			border-bottom: solid thin #efefef;


			.input {
				width: 450rpx;
				padding-left: 30rpx;
			}


		}


		.content {

			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			
			.content-title{
				width: 670rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
			
			.card {
				width: 670rpx;
				
				
				background-color: white;
				box-shadow: 1px 1px 8px 2px #e9eee9;
			
				display: flex;
				flex-direction: column;
				margin-top: 30rpx;
			
			}
			
			.cover-edit{
				width: 670rpx;
				height: 400rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}


		}
		
		.button{
			width: 670rpx;
			height: 100rpx;
			margin: 40rpx 0;
			border-radius: 20rpx;
			text-align: center;
			line-height: 100rpx;
			background-color: #5DACB1;
			color: #FFFFFF;
		}

		image {
			height: 100%;
			width: 100%;
		}
	}
</style>
